<template>
  <div class="flex flex-col w-10/12 p-2 bg-gray-200 rounded">
    <div class="flex justify-between">
      <span class="m-4 text-xl text-gray-400">订单列表</span>
    </div>
    <div class="flex items-center justify-end gap-4 mb-4 mr-2">
      <span class="font-sans">代销处ID:</span>
      <a-select v-model:value="oid" style="width: 120px" @change="handleChange">
        <a-select-option v-for="item in selectOptions" :key="item" :value="item">{{ item }}</a-select-option>
      </a-select>

      <a-month-picker placeholder="下单日期" v-model:value="lDate" @change="handleChange" />
    </div>
    <UserListingCard
      class="mb-4"
      v-for="item in managerListing"
      :key="item.lId"
      :listingInfo="item"
    />
  </div>
</template>



<script lang="ts" setup>
import { computed, ref } from "vue"
import UserListingCard from '@/components/UserListingCard.vue'
import { useGoodsStore } from '@/store/modules/goods'
import { formatTimeStrToYearMonth } from '@/utils/fomatTime'
import type { Moment } from 'moment'

const goodsStore = useGoodsStore()
const managerListing = computed(() => goodsStore.managerListing)
const selectOptions = ref<number[]>([1, 2, 3, 4])
const oid = ref(1)
const lDate = ref<Moment>()
goodsStore.getManagerListingByOfficeId(oid.value)
const handleChange = () => {
  if (!lDate.value) {
    goodsStore.getManagerListingByOfficeId(oid.value)
  } else {
    const { year, month } = formatTimeStrToYearMonth(lDate.value as Moment)
    goodsStore.getManagerListingByYearMonth({
      officeId: oid.value,
      year,
      month
    })
  }
}





</script>
<style scoped>
</style>
